<template>
  <div class="AdminSignin">
    <!-- 用户登录输入信息 -->
    <el-form
      :model="formAdminSignin"
      :rules="rules"
      ref="formAdminSignin"
      class="AdminSignin-form"
    >
      <el-form-item>
        <h2 class="title">社区疫情管理系统管理员登录</h2>
      </el-form-item>
      <!-- 显示账号与密码输入框，同时强制必填 -->
      <el-form-item prop="AdminSigninName" required>
        <el-input
          v-model="formAdminSignin.AdminSigninName"
          placeholder="请输入账号"
          style="width:300px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password" required>
        <el-input
          v-model="formAdminSignin.password"
          placeholder="请输入密码"
          style="width:300px"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="AdminSignin('formAdminSignin')"
          class="AdminSigninbutton"
          >登陆</el-button
        >
        <!--span v-show="this.errorInfo.isShowError" class='error'>
                    	{{this.errorInfo.text}}
                    </span-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AdminSignin",
  //返回新生成的组件相关数据
  data() {
    return {
      formAdminSignin: {
        //表单对象
        AdminSigninName: "",
        password: "",
      },
      /*errorInfo: {  //错误提示信息
                text: '登陆失败,请重试',
                isShowError: true //显示错误提示
            },*/
      //定义表单验证规则
      rules: {
        AdminSigninName: [
          { required: true, message: "请输入账户名", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度大于5个字符并小于 20个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  //前端测试路由拦截器，查看发送的请求正确与否
  /*mounted(){
  		this.axios.interceptors.request.use(config => {
  			console.log(config)
  			return config
  		},error =>{
  			return Promise.reject(error)
  		})
  	},*/
  methods: {
    //错误消息提醒弹窗
    // erroralert(errtext) {
    //   this.$alert("", errtext, {
    //     confimButtonText: "确定",
    //     callback: (action) => {
    //       this.$message({
    //         type: "info",
    //         message: `action:${action}`,
    //       });
    //     },
    //   });
    // },
    //检查输入的账号名与密码是否正确
    /*check(name,pwd) {
          	if(!name || name == "admin") {
              	this.error.name = '请输入姓名'
              	return false
          	}
         		if(!pwd || pwd == "123456"){
         	    	this.error.pwd = '请输入密码'
        	    	return false
        	  }
      	},*/
    //登录事件
    AdminSignin(info) {
      //判断输入的数据是否符合表单规则
      this.$refs[info].validate((valid) => {
        if (valid) {
          //向后端传送请求查看当前用户名密码是否正确
          this.$axios
            .post("/api/login", {
              username: this.formAdminSignin.AdminSigninName,
              password: this.formAdminSignin.password,
              authority: 0
            })
            .then((response) => {
              if (response.data.token) {
                //将登陆状态保存至状态管理
                this.$store.commit("AdminSignin", response.data);
                // this.erroralert("欢迎回来");
                if (this.$route.query.redirect) {
                  //跳转至重定向界面
                  this.$router.push({ path: this.$route.query.redirect });
                }
                //跳转至首页
                else this.$router.push({ name: "HomePage", path: "/HomePage" });
			  } 
			  else this.erroralert("账号或密码错误");
            })
            .catch((error) => {
            //   this.erroralert("账号或密码错误");
              console.log(error);
            });
        } else {
          console.log("error!");
          return false;
        }
      });
    },
    //进入注册界面
    signup() {
      this.$router.push({ name: "signup", path: "/signup" });
    },
  },
};
</script>

<style>

/*登录表单样式*/
.AdminSignin {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}
/*登录表单项样式*/
.AdminSignin-form {
  /*background-image: url('../static/img/sxsb.jpg');*/
  text-align: center;
  margin-top: 200px;
  width: 300px;
}
/*登录按钮样式*/
.AdminSigninbutton {
  margin-right: 100px;
}
</style>
